<template>
    <div>
        <Headernav :titletext="title" :backpage='backpage'></Headernav>
        <div class="sign">
            <div class="datatime">
                <inline-calendar 
                :render-month="[2017, 7]" 
                :hide-header ="hideHeader"
                :value="val"
                :return-six-rows="false" 
                v-model="listValue" 
                :show-last-month="true" 
                :show-next-month="true" 
                :each-day="diyday" 
                :disable-past="disablePast"
                :disable-future="disableFuture"
                :render-on-value-change="false"></inline-calendar>
                <div class="jiahao">
                    <img src="http://ot9lfn4ld.bkt.clouddn.com/IMG_qimiaoxiangfa_2.png" alt="">
                </div>
            </div>
            <div class="jifenbox">
                <p class="p1">
                    <span class="title">成长值</span>
                    <span class="num">2</span>
                </p>
                <div class="line"></div>
                <p class="p2">
                    <span class="title">积分</span>
                    <span class="num">25</span>
                </p>
            </div>
            <div class="tips">
                <p class="p1">积分兑豪礼</p>
                <p>登录签到可获得成长值，累计成长值可兑换积分，</p>
                <p>积分可用于优惠专区购买限时产品，也可参加秒杀活动，</p>
                <p>不定期还可参与抽奖活动哦 !</p>
            </div>
        </div>
    
    </div>
</template>
<script>
import Headernav from "../../components/settingheader.vue";
import { InlineCalendar } from 'vux'
export default {
    name: 'signin',
    data() {
        return {
            title: '每日一签',
            show: true,
            val: '',
            listValue: '',
            range: false,
            showLastMonth: true,
            showNextMonth: true,
            highlightWeekend: false,
            return6Rows: true,
            hideHeader: true,
            hideWeekList: false,
            replaceTextList: {},
            replace: false,
            changeWeeksList: false,
            weeksList: [],
            useCustomFn: false,
            buildSlotFn: () => '',
            disablePast: false,
            disableFuture: false,
            diyday: () => { },
            backpage:'user'
        }
    },
    components: {
        Headernav,
        InlineCalendar
    },
    created() {
    },
    watch: {
        diyday(val) {
            
        }
    }
}
</script>
<style lang="less" >
@w: 75rem;
.sign {
    font-size: 28/@w;
    text-align: center;
    margin-top: 60/@w;
    .datatime {
        padding: 30/@w;
        position: relative;
        border-bottom: 1px solid #d8d8d8;
        tr {
            height: 50/@w;
        }
        .inline-calendar td {
            font-size: 32/@w;
            text-align: center;
            width: 100/7%;
        }
        .inline-calendar td>span.vux-calendar-each-date {
            width: 30/@w;
            height: 30/@w;
            line-height: 30/@w;
            box-sizing: border-box;
        }
        .inline-calendar td.current>span.vux-calendar-each-date {
            width: 40/@w;
            height: 40/@w;
            line-height: 40/@w;
            box-sizing: border-box;
            margin-left: 8/@w;
        }
        .jiahao {
            position: absolute;
            right: 50/@w;
            bottom:-65/@w;                  
            img {
                width: 104/@w;
                height: 104/@w;
                border-radius: 50%;
            }
            
        }
    }
    .jifenbox {
        width: 710/@w;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0 50/@w;
        -webkit-box-sizing: border-box;
        box-shadow: 0 0 10px 4px #e9e9e9;
        margin: 0 auto;
        margin-top: 70/@w;
        border-radius: 15px;
        p {
            height: 96/@w;
            line-height: 96/@w;
            -webkit-box-sizing: 30/@w;
            font-size: 30/@w;
            color: #000;
            .title {
                float: left;
            }
            .num {
                float: right;
                margin-right: 110/@w;
            }
        }
        .line {
            height: 1px ;
            background: #a6a6a6;
        }
    }
    .tips {
        width: 710/@w;
        box-sizing: border-box;
        overflow: hidden;
        padding: 30/@w;
        text-align: left;
        margin: 0 auto;
        margin-top: 30/@w;
        border-radius: 15/@w;
        box-shadow: 0 0 10px 4px #e9e9e9;
        p {
            font-size: 22/@w;
            color: #333;
            line-height: 30/@w;
        }
        .p1 {
            text-align: center;
            font-size: 30/@w;
            color: #000;
            margin-bottom: 30/@w;
        }
    }
}
</style>

